<template>
  <div class="shallowRefshallowReactive">
    <h1>这里介绍shallowRef和shallowReactive</h1>
    <div>{{ myObj }}</div>
  </div>
</template>
<script lang="ts" setup>
import { ref, shallowReactive, shallowRef } from "vue";
// 1.shallowRef
// 创建一个响应式数据但只对顶层属性进行响应式处理
// 特点：只跟踪引用值的变化，不关心内部属性的变化
let myObj = shallowRef(""); //初始值

// 2.shallowReactive
// 创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的
// 对象的顶层属性是响应式的，但嵌套对象的属性不是
let myobj = shallowReactive({"":""})

// 总结：shallowRef和shallowReactive
</script>
<style scoped>
.shallowRefshallowReactive {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>
